<template>
  <Sticky v-if="test.id" :class-name="'sticky'">
    <el-row :gutter="24">
      <el-col :span="6">
        <span class="testItem testName testTitleLabel">
          试卷:
          <el-tooltip effect="dark" :content="test.title" placement="bottom">
            <router-link :to="{
                path: '/testInfo',
                query: {
                  id: test.id,
                },
              }" class="testItemContent testTitleContent">{{ test.title }}</router-link>
          </el-tooltip>
        </span>
      </el-col>
      <el-col :span="18" class="testTitleCol">
        <span class="testItem">
          <template v-if="question.id">
            <el-button v-if="!question.readonly && !isEdit" size="mini" type="primary"
              @click="$emit('edit')">编辑</el-button>
            <span v-if="!question.readonly && !isEdit" style="margin-left: 8px">
              <el-button v-if="!question.readonly && !isEdit" size="mini" type="info"
                @click="$emit('save-continue')">继续添加</el-button>
            </span>
          </template>
          <el-button v-if="question.id && question.readonly" size="mini" type="primary"
            @click="$emit('bind-question')">关联题目</el-button>
        </span>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="10" class="testTitleCol">
        <span class="testItem testStructure">
          题目所属大题:
          <el-select :disabled="readonly" v-model="test.testStructure" size="mini" class="testItemContent">
            <el-option v-for="testStructureItem in test.testStructures" :key="testStructureItem.id"
              :label="testStructureItem.title" :value="testStructureItem.id" />
          </el-select>
        </span>
        <span class="testItem testScore">
          题目分值:
          <el-input-number :disabled="readonly" v-model="question.score" :controls="false" :min="1"
            class="testItemContent" size="mini" />
        </span>
        <span style="line-height: 35px">
          <template v-if="showUpDown">
            <el-button :disabled="upDisabled" size="mini" icon="el-icon-arrow-up" circle
              @click="$emit('question-up')" />
            <el-button :disabled="downDisabled" size="mini" icon="el-icon-arrow-down" circle
              @click="$emit('question-down')" />
          </template>
        </span>
      </el-col>
    </el-row>
  </Sticky>
</template>

<script>
import Sticky from "@/components/Sticky";

export default {
  name: "QuestionHeader",
  components: {
    Sticky
  },
  props: {
    test: {
      type: Object,
      required: true
    },
    question: {
      type: Object,
      required: true
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    showUpDown: {
      type: Boolean,
      default: false
    },
    upDisabled: {
      type: Boolean,
      default: true
    },
    downDisabled: {
      type: Boolean,
      default: true
    }
  }
};
</script>

<style scoped>
.sticky {
  height: 80px;
  background-color: #f2f6fc;
}

.testItem {
  margin-right: 20px;
}

.testItemContent {
  margin-left: 8px;
}

.testTitleLabel {
  font-weight: bold;
}

.testTitleContent {
  color: #409EFF;
  text-decoration: none;
}

.testTitleContent:hover {
  text-decoration: underline;
}
</style>